<template>
    <!-- 使用 Element UI 的对话框组件展示下载专区表单 -->
    <el-dialog v-model="dialog_visible" title="下载专区" width="512px">
        <!-- 一级 -->
        <el-form :model="form" label-width="120px" size="large">
            <!-- 下载链接输入项 -->
            <el-form-item label="下载链接" required>
                <el-input v-model="link" type="textarea" placeholder="请输入下载链接" />
            </el-form-item>
            <!-- 操作按钮项 -->
            <el-form-item label="">
                <el-button type="primary" @click="handleSubmit"
                    v-if="userStore.info_data.role == 'organizing'">确定修改</el-button>
                <el-button type="primary" @click="handleJumpLink" v-else>点击跳转</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
// 导入 Vue 的 Composition API
import { onMounted, ref } from "vue";
// 导入用户状态管理
import { useUserStore } from "@/store/user";
// 获取用户状态
const userStore = useUserStore();
// 控制对话框显示的响应式引用
const dialog_visible = ref(false);
import { getSysConfig, updateSysConfig } from '@/api/manage/index'

const link = ref('')
const id = ref('')
// 打开对话框的函数
const handleOpenModal = () => {
    dialog_visible.value = true;
};
const getData = async () => {
    const res = await getSysConfig();
    console.log(res)
    if (res.success === true) {
        link.value = res.entity.content
        id.value = res.entity.id
    }
}
const handleSubmit = async () => {
    const res = await updateSysConfig({
        id: id.value,
        content: link.value
    })
    if (res.success === true) {
        // 成功提示弹窗
    }
    dialog_visible.value = false
}
const handleJumpLink = () => {
    window.open(link.value)
}
// 暴露方法给父组件调用
defineExpose({
    handleOpenModal,
});
onMounted(() => {
    getData()
})
</script>


<style lang="scss" scoped></style>